<template>
    <div class="z-content">
        <img src="../assets/bm_logo.jpeg" class="logo"/>
        <div class="demo-input">
            当前IP: <input type="text" v-model="ip" placeholder="IP" class="el-input__inner">
        </div>

        <div class="content-btns">
            <a class="el-button el-button--primary" @click="updateIP">修改IP</a>
            <a class="el-button el-button--primary" @click="start">启动服务</a>
        </div>
    </div>
</template>

<script>
  import {ipcRenderer} from 'electron'
  export default {
      name: 'content',
      data () {
        return {
          ip: ''
        }
      },
      methods: {
        updateIP() {
          ipcRenderer.send('update-config', this.ip);
        },
        start() {
          console.log('1234')
          ipcRenderer.send('start-service')
        }
      },
      mounted() {
        ipcRenderer.send('get-config', 'ping');
        ipcRenderer.on('get-config-success', (event, message) => {
          let obj = JSON.parse(message)
          this.ip  = obj.ip
        })

        ipcRenderer.on('config-success', (event, meesage) => {
          alert('修改成功')
        })

        ipcRenderer.on('end-success', (event, message) => {
          alert('启动成功')
        })
      }
  }
</script>
<style>
  .z-content{
    padding: 30px;
    margin: 50px auto;
    text-align: center;
  }
  .z-content .logo{
      width: 160px;
      margin-bottom: 50px;
  }
  .z-content .el-input__inner{
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: none;
      padding: 0 15px;
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 60%;
      margin-left: 10px;
  }
  .z-content .el-button {
      margin-top: 50px;
      margin-left: 30px;
      width: 120px;
      border-radius: 20px;
      padding: 12px 23px;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      color: #fff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      transition: .1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      font-size: 14px;
      background-color: #409eff;
      border-color: #409eff;
  }
</style>